import React, { useState } from "react"
import RouteDebuggerPage from "./RouteDebuggerPage"

const DevToolsFloatingButton: React.FC = () => {
  const [isOpen, setIsOpen] = useState(false)

  const toggleDebugger = () => setIsOpen((prev) => !prev)

  return (
    <>
      <button
        onClick={toggleDebugger}
        className="
          fixed bottom-6 right-6 z-[1000]
          w-14 h-14
          flex items-center justify-center
          rounded-full
          bg-indigo-600 text-white text-2xl font-bold
          p-4 shadow-lg
          hover:bg-indigo-700 hover:scale-110
          focus:outline-none focus:ring-4 focus:ring-indigo-300 focus:ring-offset-2 focus:ring-offset-white
          transition-all duration-300 ease-in-out
        "
        aria-label="切换路由调试器"
      >
        {isOpen ? "✖" : "⚙"}
      </button>

      {isOpen && (
        <div
          className="
            fixed inset-0 z-[999]
            bg-white/40 backdrop-blur-sm
            flex items-center justify-center
            p-4
          "
          onClick={(e) => {
            if (e.target === e.currentTarget) setIsOpen(false)
          }}
        >
          <RouteDebuggerPage onClose={() => setIsOpen(false)} />
        </div>
      )}
    </>
  )
}

export default DevToolsFloatingButton
